In this tutorial, I will show you way to build (Multiple) Image upload and Preview example with Web API/Rest API using Angular Material 17, FormData and Progress Bar.

More Practice:– Angular 17 + Bootstrap: Multiple Images Upload with Preview– Angular 17 + Spring Boot: File upload example– Angular 17 + Node Express: File Upload example– Angular 17 CRUD Application with Rest API– Angular 17 Form Validation example– Angular 17 JWT Authentication and Authorization example

Serverless with Firebase:Angular 17 Upload File to Firebase Storage example

Contents

We will create an Angular Material 17 (Multiple) Image upload with Preview application in that user can:

Here are screenshots of our React App:

– Before upload:

– When Upload is done:

– Click on Get Images button for List of Images with download Urls:

– Handle error and show status for each image upload:

Here are Rest APIs that we will use Axios to make HTTP requests:

You can find how to implement the Rest APIs Server at one of following posts:– Node.js Express File Upload Rest API example– Node.js Express File Upload to MongoDB example– Node.js Express File Upload to Google Cloud Storage example– Spring Boot Multipart File upload example

Let’s open cmd and use Angular CLI to create a new Angular Project as following command:

We also need to generate some Components and Services:

Now you can see that our project directory structure looks like this.

Let me explain it briefly.

– We import necessary library, components in app.module.ts.– file-upload.service provides methods to save File and get Files from Rest Apis Server.– upload-images.component contains upload multiple images form, preview, some progress bars, display list of images.– app.component is the container that we embed all components.– index.html for importing the Font and Icons.

Set up your Angular Material project by running the command:ng add @angular/material

You need to answer some questions:

The command will install Angular Material, the Component Dev Kit (CDK), (with/without) Angular Animations and additionally perform the following configurations:

Open app.module.ts, import HttpClientModule and several Angular Material modules:

This service will use Angular HttpClient to send HTTP requests.There are 2 functions:

services/file-upload.service.ts

– FormData is a data structure that can be used to store key-value pairs. We use it to build an object which corresponds to an HTML form with append() method.

– We set reportProgress: true to exposes progress events. Notice that this progress event are expensive (change detection for each event), so you should only use when you want to monitor it.

– We call the request(PostRequest) & get() method of HttpClient to send an HTTP POST & Get request to the Multiple Files Upload Rest server.

Let’s create a Multiple Images Upload UI with Preview, Progress Bars, Card, Button and Message.

First we need to use the following imports:

upload-images.component.ts

Then we define the some variables and inject FileUploadService as follows:

The progressInfos is an array that contains items for display upload progress of each images. Each item will have 2 fields: percentage & fileName.

selectedFileNames array will be used for displaying selected files.

Next we define selectFiles() method. It helps us to get the selected Images that we’re gonna upload.

We use FileReader with readAsDataURL() method to get the image preview URL and put it into previews array. This method produces data as a data: URL representing the file’s data as a base64 encoded string. The URL life is tied to the document in the window on which it was created.

Also use selectedFiles array for accessing current selected Files.

Now we iterate over the selected Files above and call upload() method on each file item.

Next we define upload() method for uploading each image:

We use idx for accessing index of the current File to work with progressInfos array. Then we call uploadService.upload() method on the file.

The progress will be calculated basing on event.loaded and event.total.If the transmission is done, the event will be a HttpResponse object.

We call uploadService.getFiles() to get the files’ information and assign the result to imageInfos variable in ngOnInit() and getList() methods:

Now we create the HTML template of the Upload Images UI with Angular Material Components.Add the following content to upload-images.component.html file: